/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>入库管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="condition" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="condition.wcode"
          placeholder="请输入单号"
        ></el-input>
      </el-form-item>

      <el-form-item label="">
        <el-select
          size="small"
          v-model="condition.warehouseId"
          placeholder="请选择仓库"
        >
          <el-option label="仓库" value=""></el-option>
          <el-option
            v-for="(item, index) in warehouses"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-select
          size="small"
          v-model="condition.supplierId"
          placeholder="请选择供应商"
        >
          <el-option label="供应商" value=""></el-option>
          <el-option
            v-for="(item, index) in suppliers"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-select
          size="small"
          v-model="condition.materialId"
          placeholder="请选择入库材料"
        >
          <el-option label="材料" value=""></el-option>
          <el-option
            v-for="(item, index) in materials"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-select
          size="small"
          v-model="condition.status"
          placeholder="请选择入库材料"
        >
          <el-option label="状态" value=""></el-option>
          <el-option label="通过" value="01"></el-option>
          <el-option label="审核中" value="02"></el-option>
          <el-option label="失败" value="00"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleEdit('add')"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->

    <div>
      <el-button
        size="mini"
        type="danger"
        @click="dels"
        style="margin-bottom: 5px"
        >批量删除</el-button
      >
    </div>

    <el-table
      size="small"
      :data="listData"
      @selection-change="selectChange"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>

      <!-- 入库单号 -->
      <el-table-column sortable prop="wcode" label="入库单号" min-width="150">
      </el-table-column>

      <!--  负责人-->
      <el-table-column sortable prop="manager" label="负责人" min-width="150">
      </el-table-column>

      <!-- 供应商 -->
      <el-table-column
        sortable
        prop="supplierId"
        label="供应商"
        min-width="150"
        :formatter="supplierFormat"
      >
      </el-table-column>

      <!--  仓库-->
      <el-table-column
        sortable
        prop="warehouseId"
        label="仓库"
        min-width="150"
        :formatter="warehouseFormat"
      >
      </el-table-column>

      <!--  材料-->
      <el-table-column
        sortable
        prop="materialId"
        label="材料"
        min-width="150"
        :formatter="materialFormat"
      >
      </el-table-column>

      <!--  数量-->
      <el-table-column sortable prop="count" label="数量" min-width="150">
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column
        sortable
        prop="createTime"
        label="创建时间"
        min-width="150"
      >
      </el-table-column>

      <!-- 修改时间 -->
      <el-table-column
        sortable
        prop="updateTime"
        label="修改时间"
        min-width="150"
      >
      </el-table-column>

      <!-- 状态 -->
      <el-table-column
        prop="status"
        label="状态"
        min-width="80"
        :formatter="statusFormat"
      >
      </el-table-column>

      <!-- 供应商状态 -->
      <el-table-column
        prop="supplierStatus"
        label="供应商状态"
        min-width="80"
        :formatter="statusFormat"
      >
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit('view', scope.row)"
            >详情</el-button
          >

          <el-button size="mini" @click="handleEdit('edit', scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="30%"
      @close="closeDialog"
    >
      <el-form
        label-width="100px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="仓库" prop="warehouseId">
          <el-select
            size="small"
            v-model="editForm.warehouseId"
            placeholder="请选择需入库的仓库"
            @change="setManager"
            :disabled="isView"
          >
            <el-option
              v-for="(item, index) in warehouses"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="负责人" prop="manager">
          <el-input
            size="small"
            v-model="editForm.manager"
            placeholder="请输入负责人"
            :disabled="isView"
          ></el-input>
        </el-form-item>

        <el-form-item label="材料" prop="materialId">
          <el-select
            size="small"
            v-model="editForm.materialId"
            placeholder="请选择需入库的材料"
            :disabled="isView"
          >
            <el-option
              v-for="(item, index) in materials"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量" prop="count">
          <el-input-number
            size="small"
            v-model="editForm.count"
            :min="0"
            :step="1"
            :disabled="isView"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="供应商" prop="supplierId">
          <el-select
            size="small"
            v-model="editForm.supplierId"
            placeholder="请选择材料的供应商"
            :disabled="isView"
          >
            <el-option
              v-for="(item, index) in suppliers"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status" v-if="!isAdd && !isView">
          <el-select
            size="small"
            v-model="editForm.status"
            placeholder="选择审核状态"
            :disabled="chooseStatus()"
          >
            <el-option label="通过" value="01"></el-option>
            <el-option label="审核中" value="02"></el-option>
            <el-option label="失败" value="00"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详情描述" prop="remarks">
          <el-input
            type="textarea"
            v-model="editForm.remarks"
            placeholder="请输入入库详情描述"
            :rows="3"
            :disabled="isView"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  inject: ["reload"],
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      isView: false, //是否为详情页面
      isAdd: false, //是否为添加页面
      title: "添加",
      suppliers: [], //供应商
      materials: [], //材料
      warehouses: [], //仓库
      editForm: {
        id: "",
        wcode: "",
        warehouseId: "",
        supplierId: "",
        materialId: "",
        count: 0,
        manager: "",
        remarks: "",
        status: "",
        supplierStatus: "",
      },
      // rules表单验证
      rules: {
        supplierId: [
          { required: true, message: "请选择材料供应商", trigger: "blur" },
        ],
        materialId: [
          { required: true, message: "请选择需要入库的材料", trigger: "blur" },
        ],
        warehouseId: [
          { required: true, message: "请选择需要入库的仓库", trigger: "blur" },
        ],
        manager: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" },
        ],
        count: [
          { required: true, message: "请输入需要入库的数量", trigger: "blur" },
        ],
      },
      condition: {
        currentPage: 1,
        pageSize: 10,
        wcode: "",
        warehouseId: "",
        materialId: "",
        supplierId: "",
        status: "",
      },
      listData: [], //用户数据
      // 选择数据
      selectdata: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },

  /**
   * 创建完毕
   */
  mounted() {
    this.getSuppliers();
    this.getMaterial();
    this.getWarehouse();
  },
  created() {
    this.init();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //获取供应商
    async getSuppliers() {
      var d = await this.$axios.get("/supplier/activeAll");
      this.suppliers = d.data;
    },

    //获取材料
    async getMaterial() {
      var d = await this.$axios.get("/material/activeAll");
      this.materials = d.data;
    },

    //获取仓库
    async getWarehouse() {
      var d = await this.$axios.get("/warehouse/activeAll");
      this.warehouses = d.data;
    },

    //初始化表格
    async init() {
      this.loading = true;
      var d = await this.$axios.post("/warehousing/page", this.condition);
      if (d.code == 200) {
        this.listData = d.data.records;
        this.pageparm.currentPage = d.data.current;
        this.pageparm.pageSize = d.data.size;
        this.pageparm.total = d.data.total;
        console.log(this.listData);
      } else {
        this.$message.error(d.message);
      }
      this.loading = false;
    },

    //修改用户状态
    async setStatus(id, status) {
      this.loading = true;
      let param = {
        id: id,
        status: status,
      };
      var d = await this.$axios.put("/customer/status", param);
      if (d.code == 200) {
        this.$message.success(d.message);
      } else {
        this.$message.error(d.message);
      }
      this.loading = false;
    },

    //只能审批一次
    chooseStatus() {
      return this.isView || this.editForm.status != "02";
    },

    //设置负责人
    setManager(val) {
      for (let i = 0; i < this.warehouses.length; i++) {
        if (this.warehouses[i].id == val) {
          this.editForm.manager = this.warehouses[i].admin.name;
        }
      }
    },

    //格式化
    materialFormat(row, column, cellValue, index) {
      for (let i = 0; i < this.materials.length; i++) {
        if (this.materials[i].id == cellValue) {
          return this.materials[i].name;
        }
      }
    },
    //格式化
    warehouseFormat(row, column, cellValue, index) {
      for (let i = 0; i < this.warehouses.length; i++) {
        if (this.warehouses[i].id == cellValue) {
          return this.warehouses[i].name;
        }
      }
    },
    //格式化
    supplierFormat(row, column, cellValue, index) {
      for (let i = 0; i < this.suppliers.length; i++) {
        if (this.suppliers[i].id == cellValue) {
          return this.suppliers[i].name;
        }
      }
    },
    //格式化
    statusFormat(row, column, cellValue, index) {
      if (cellValue == null) {
        return "仓库审核中";
      }
      if (cellValue == "01") {
        return "审核通过";
      } else {
        return cellValue == "00" ? "审核失败" : "审核中..";
      }
    },
    // 分页插件事件
    callFather(parm) {
      this.condition.currentPage = parm.currentPage;
      this.condition.pageSize = parm.pageSize;
      this.init();
    },
    // 搜索事件
    search() {
      this.init();
    },

    //显示编辑界面
    handleEdit: function (name, row) {
      this.editFormVisible = true;
      if (row != undefined && row != "undefined") {
        this.title = "修改";
        this.isAdd = false;
        this.isView = name == "view";
        this.editForm.id = row.id;
        this.editForm.wcode = row.wcode;
        this.editForm.supplierId = row.supplierId;
        this.editForm.warehouseId = row.warehouseId;
        this.editForm.materialId = row.materialId;
        this.editForm.count = row.count;
        this.editForm.manager = row.manager;
        this.editForm.status = row.status;
        this.editForm.supplierStatus = row.supplierStatus;
        this.editForm.remarks = row.remarks;
      } else {
        this.title = "添加";
        this.isAdd = true;
        this.isView = false;
      }
    },

    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(async (valid) => {
        if (valid) {
          if (this.isAdd) {
            //添加
            var d = await this.$axios.post("/warehousing/add", this.editForm);
            if (d.code == 200) {
              this.$message.success(d.message);
              this.reload();
            } else {
              this.$message.error(d.message);
            }
          } else {
            //编辑
            var d = await this.$axios.put("/warehousing/update", this.editForm);
            if (d.code == 200) {
              this.$message.success(d.message);
              this.reload();
            } else {
              this.$message.error(d.message);
            }
          }
        } else {
          return false;
        }
      });
    },

    // 删除
    del(id) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          var d = await this.$axios.delete("/warehousing/del/" + id);
          if (d.code == 200) {
            this.$message.success(d.message);
            this.loading = false;
            this.reload();
          } else {
            this.$message.error(d.message);
            this.loading = false;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val;
    },

    // 批量删除
    dels() {
      if (this.selectdata.length <= 0) {
        return;
      }
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          let ids = [];
          for (let i = 0; i < this.selectdata.length; i++) {
            ids.push(this.selectdata[i].id);
          }
          var d = await this.$axios.post("/warehousing/dels", ids);
          if (d.code == 200) {
            this.$message.success(d.message);
            this.loading = false;
            this.reload();
          } else {
            this.$message.error(d.message);
            this.loading = false;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
      this.editForm = {
        id: "",
        wcode: "",
        warehouseId: "",
        supplierId: "",
        materialId: "",
        count: 0,
        manager: "",
        remarks: "",
        status: "",
      };
      this.$refs.editForm.resetFields();
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 